/*!
 * SPDX-License-Identifier: Apache-2.0
 *
 * The OpenSearch Contributors require contributions made to
 * this file be licensed under the Apache-2.0 license or a
 * compatible open source license.
 *
 * Modifications Copyright OpenSearch Contributors. See
 * GitHub history for details.
 */

/**
 * 1. Add vertical space between breadcrumbs,
 *    but make sure the whole breadcrumb set doesn't add space below itself
 */

.ouiBreadcrumbs {
  @include ouiFontSizeS;
  margin-bottom: -$ouiSizeXS; /* 1 */
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  min-width: 0; // Ensure it shrinks if the window is narrow
}

.ouiBreadcrumb {
  display: inline-block;
  // TODO: remove important: https://github.com/opensearch-project/oui/issues/376
  color: $ouiBreadcrumbInactiveTextColor !important; // sass-lint:disable-line no-important

  &:hover {
    color: $ouiBreadCrumbHoverColor !important; // sass-lint:disable-line no-important
  }
}

.ouiBreadcrumb,
.ouiBreadcrumb__collapsedLink {
  &.ouiLink {
    &[class*='ouiLink--']:focus {
      // .ouiLink uses a rule with !important which shows an outline
      animation: none !important; // sass-lint:disable-line no-important
    }
  }
}

.ouiBreadcrumbs:not(.ouiBreadcrumbs__inPopover) .ouiBreadcrumbWrapper--last .ouiBreadcrumb {
  font-weight: $ouiFontWeightMedium;
}

.ouiBreadcrumb--collapsed {
  flex-shrink: 0;
  color: $ouiBreadcrumbCollapsedLink !important; // sass-lint:disable-line no-important
  vertical-align: top !important; // sass-lint:disable-line no-important
}

.ouiBreadcrumb__collapsedLink:hover {
  color: $ouiBreadCrumbHoverColor !important; // sass-lint:disable-line no-important
}

.ouiBreadcrumbs--truncate {
  white-space: nowrap;
  flex-wrap: nowrap;

  .ouiBreadcrumb:not(.ouiBreadcrumb--collapsed) {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top; // overflow hidden causes misalignment of links and slashes, this fixes that
  }
}

.ouiBreadcrumb--truncate {
  @include ouiTextTruncate;
  max-width: 100%;
  text-align: center;
  vertical-align: top; // overflow hidden causes misalignment of links and slashes, this fixes that
}

.ouiBreadcrumbWrapper--truncate {
  max-width: $ouiBreadcrumbTruncateWidth;
}

.ouiBreadcrumbWrapper {
  position: relative;
  z-index: 0;

  $paddingTop: $ouiSizeXS - 2.5;
  $paddingBottom: $paddingTop;
  $paddingLeft: $ouiSizeL - $ouiSizeXS;
  $paddingRight: $paddingLeft + calc($ouiBreadcrumbSpacing / 2);
  padding: $paddingTop $paddingRight $paddingBottom $paddingLeft;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc($ouiBreadcrumbSpacing / 2);
    right: calc($ouiBreadcrumbSpacing / 2);
    z-index: -1;

    transform: skewX(-20deg);
    border-radius: $ouiSizeXS;

    background-color: $ouiBreadcrumbInactiveBackground;
  }

  .ouiBreadcrumbs--truncate &:not(.ouiBreadcrumbWrapper--collapsed) {
    max-width: $ouiBreadcrumbTruncateWidth;
    // At least one letter + ellipsis but add 1ch because 1ch for each might not be enough
    min-width: calc(3ch + $paddingLeft + $paddingRight);
    overflow: hidden;
    text-overflow: ellipsis;

    &.ouiBreadcrumbWrapper--last {
      max-width: none;
    }
  }

  .ouiBreadcrumbWall:has(&:not(.ouiBreadcrumbWrapper--collapsed)) {
    min-width: calc(3ch + $paddingLeft + $paddingRight);
  }

  .ouiBreadcrumbs:not(.ouiBreadcrumbs__inPopover) & {
    &.ouiBreadcrumbWrapper--last {
      // This targets the last breadcrumb wrapper and sets a different text color for the breadcrumb inside it.
      .ouiBreadcrumb,
      .ouiBreadcrumb:hover {
        color: inherit !important; // sass-lint:disable-line no-important
      }

      &::before {
        background-color: $ouiBreadcrumbActiveBackground;
      }
    }
  }

  &:has(.ouiLink--subdued:focus)::before {
    background-color: $ouiBreadcrumbFocusBackground;
  }

  &:not(.ouiBreadcrumbWrapper--first) {
    margin-bottom: $ouiSizeXS; /* 1 */

    $paddingLeft: $paddingRight;
    padding-left: $paddingLeft;

    .ouiBreadcrumbs--truncate &:not(.ouiBreadcrumbWrapper--collapsed) {
      // At least one letter + ellipsis but add 1ch because 1ch for each might not be enough
      min-width: calc(3ch + $paddingLeft + $paddingRight);
    }
  }
}

.ouiBreadcrumbWall {
  background-image: linear-gradient(to right, $ouiBreadcrumbInactiveBackground 0 $ouiSizeM, transparent $ouiSizeM);
  border-radius: $ouiSizeXS;
  overflow: hidden;
  margin-bottom: $ouiSizeXS; /* 1 */

  &:has(.ouiLink--subdued:focus) {
    background-image: linear-gradient(to right, $ouiBreadcrumbFocusBackground 0 $ouiSizeM, transparent $ouiSizeM);
  }
}

.ouiBreadcrumbWall--single {
  background-image: linear-gradient(to right, $ouiBreadcrumbActiveBackground 0 $ouiSizeM, transparent $ouiSizeM);
}

.euiLink.euiBreadcrumb {
  line-height: inherit;
  font-weight: inherit;
}
